<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>五星红旗</title>
    <style>
        /* 红旗背景 */
        .flag {
            position: relative;
            width: 300px;
            height: 200px;
            background-color: #DE2910; /* 红色背景 */
            display: flex;
            justify-content: flex-start; /* 大星星位于左上角 */
            align-items: flex-start;
            padding: 15px;
        }

        /* 大星星 */
        .big-star {
            position: absolute;
            top: 15px;
            left: 15px;
            width: 50px;
            height: 50px;
            background-color: gold;
            clip-path: polygon(
                50% 0%, 61% 35%, 98% 35%, 
                68% 57%, 79% 91%, 50% 70%, 
                21% 91%, 32% 57%, 2% 35%, 39% 35%
            );
        }

        /* 小星星样式 */
        .small-star {
            position: absolute;
            width: 20px;
            height: 20px;
            background-color: gold;
            clip-path: polygon(
                50% 0%, 61% 35%, 98% 35%, 
                68% 57%, 79% 91%, 50% 70%, 
                21% 91%, 32% 57%, 2% 35%, 39% 35%
            );
        }

        /* 定位小星星 */
        .small-star:nth-child(2) { /* 第一颗小星星 */
            top: 15px;
            left: 90px;
            transform: rotate(25deg);
        }

        .small-star:nth-child(3) { /* 第二颗小星星 */
            top: 35px;
            left: 120px;
            transform: rotate(50deg);
        }

        .small-star:nth-child(4) { /* 第三颗小星星 */
            top: 65px;
            left: 120px;
            transform: rotate(30deg);
        }

        .small-star:nth-child(5) { /* 第四颗小星星 */
            top: 90px;
            left: 100px;
            transform: rotate(5deg);
        }
    </style>
</head>
<body>
    <div class="flag">
        <div class="big-star"></div>
        <div class="small-star"></div>
        <div class="small-star"></div>
        <div class="small-star"></div>
        <div class="small-star"></div>
    </div>
</body>
</html>
